<template>
  <section class="organization_label_manage_header">
    <div class="organization_label_manage_header__left">
      <el-form :inline="true" :model="form">
        <el-form-item label="分类名称/ID">
          <el-input v-model="form.key" placeholder="请输入操作人名称/ID"></el-input>
        </el-form-item>
        <el-form-item label="分类状态">
          <el-select v-model="form.status">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="organization_label_manage_header__right">
      <el-button type="primary" icon="el-icon-plus" @click="handleCreateLabel">新增组织标签</el-button>
    </div>
  </section>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "organizationLabelManageHeader",
  data() {
    return {
      form: {
        key: '',
        status: null
      },
      statusOptions: [
        {
          value: null,
          label: "全部"
        },
        {
          value: 1,
          label: "启用"
        },
        {
          value: 2,
          label: "停用"
        }
      ],
    };
  },
  watch: {
    tableParams (val) {
      const { key, status } = val
      this.form = {
        key,
        status,
      }
    }
  },
  computed: {
    ...mapGetters({
     tableParams: "organizationLabelManage/tableParams",
    })
  },
  methods: {
    ...mapActions({
       fetchTableData: "organizationLabelManage/fetchTableData",
       createLabel: "organizationLabelManage/createLabel",
    }),
    handleSearch() {
      const {key, status} = this.form
      this.fetchTableData({
        ...this.tableParams,
        key,
        status,
        page: 1
      })
    },
    handleCreateLabel() {
       this.createLabel()
    }
  }
};
</script>
<style scoped>
.organization_label_manage_header {
  overflow: hidden;
}
.organization_label_manage_header__left {
  float: left;
}

.organization_label_manage_header__right {
  float: right;
}
</style>
